<template>
  <div class="search">
    <div class="search-input">
      <input type="text" v-model="keyword" placeholder="请输入关键词" @confirm="getGoodsList"/>
      <icon class="search-icon" type="search"></icon>
      <img class="search-clear" @click="clearKeyword" v-if="FileUrl.length>0&&keyword.length>0" :src="FileUrl+'clear-icon.png'" />
    </div>
    <div class="body">
      <div class="search-default" v-if="!searchShow">
        <div class="hot-search">
          <div class="title">
            <span>热搜</span>
          </div>
          <div class="list" v-if="recommend_keyword.length>0">
            <div class="item" v-for="(item,index) in recommend_keyword" :key="index" @click="changeKeyWords(item)">{{item}}</div>
          </div>
          <div class="null" v-if="recommend_keyword.length==0">
            暂无热门搜索词~~
          </div>
        </div>
        <div class="history-search" v-if="my_history.length>0">
          <div class="title">
            <span>搜索历史</span>
            <div class="delicon" @click="delMykeywordRecord">
              <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/boluodan/delete-icon.png">
              清空
            </div>

          </div>
          <div class="list">
            <div class="item" v-for="(item,index) in my_history" :key="index" @click="changeKeyWords(item)">{{item}}</div>
          </div>
        </div>
      </div>
      <div class="search-list" v-if="searchShow">
        <div class="null" v-if="searchList.length==0">
          没有搜索到相关产品~~
        </div>
        <div class="search-item" v-for="(item,index) in searchList" :key="index" @click="toGoodsDetail(item.id)">
          <div class="item-img">
            <img :src="item.thumb_Url" />
          </div>
          <div class="item-des">{{item.name}}</div>
          <div class="price">
            <span>￥{{item.s_price}}</span>
<!--            <span class="original">￥5.00</span>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        keyword:'',
        FileUrl: this.$base,
        page: 1,
        limit: 4,
        searchList: [],
        my_history:[],
        recommend_keyword:[],
        searchShow: false
      }
    },
    onShow(){
      this.getSearchKeyword();
    },
    methods:{
      changeKeyWords(item){
        this.keyword = item;
        this.getGoodsList();
      },
      //获取搜索记录与推荐关键词
      async getSearchKeyword(){
        const res = await this.$request.getData('/other/getSearchKeyword',{user_token: wx.getStorageSync('userToken')});
        if (res.data.level == 'success'){
          this.my_history = res.data.data.my_history;
          this.recommend_keyword = res.data.data.recommend_keyword;
        }
      },
      //清空我的搜索记录
      async delMykeywordRecord(){
        const res = await this.$request.getData('/other/delMykeywordRecord',{user_token: wx.getStorageSync('userToken')});
        if (res.data.level == 'success'){
          this.getSearchKeyword();
        }
      },
      //获取搜索结果
      async getGoodsList(){
        wx.showLoading()
        let params = {
          goods_name: this.keyword,
          page: this.page,
          limit: this.limit,
          shop_id:wx.getStorageSync('shop_id')||''
        }
        const res = await this.$request.getData('/goods/getGoodsList',params);
        if (res.data.level == 'success'){
          this.searchList = res.data.data;
          this.searchShow = true;
          wx.hideLoading()
        }
      },
      clearKeyword(){
        this.keyword = '';
        this.searchShow = false;
        this.getSearchKeyword();
      },
      toGoodsDetail(id){
        wx.navigateTo({url:'/pages/goodsDetail/main?id='+id})
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/css/mixin";
  .search{
    padding-top: 120rpx;
  }
  .search-input{
    position: fixed;
    left: 0;
    top: 0;
    padding: 20rpx 30rpx;
    background: #ffffff;
    width: calc(100vw - 60rpx);
    z-index: 1000;
    input{
      width: calc(100% - 160rpx);
      height: 80rpx;
      line-height: 80rpx;
      border: 1rpx solid #eeeeee;
      padding: 0 80rpx;
      border-radius: 32rpx;
    }
    .search-icon{
      position: absolute;
      top: 40rpx;
      left: 50rpx;
    }
    .search-clear{
      position: absolute;
      top: 40rpx;
      right: 50rpx;
      height: 40rpx;
      width: 40rpx;
    }
  }
  .body{
    padding-top: 40rpx;
  }
  .search-default{
    padding: 0 30rpx;
    .hot-search{
      .title{
        height: 50rpx;
        line-height: 50rpx;
      }
      .list{
        padding-top: 40rpx;
        @include flexWrap(flex-start,flex-start);
        flex-direction: row;
        .item{
          width: calc((100% - 130rpx)/3);
          height: 50rpx;
          text-align: center;
          line-height: 50rpx;
          border: 1rpx solid #e8e8e8;
          background: #ffffff;
          margin-right: 40rpx;
          margin-bottom: 40rpx;
        }
      }
    }
    .history-search{
      .title{
        @include flex(flex-start);
        flex-direction: row;
        height: 50rpx;
        line-height: 50rpx;
        .delicon{
          margin-left: auto;
          height: 50rpx;
          line-height: 50rpx;
          @include flex(flex-start);
          flex-direction: row;
          color: #707070;
          img{
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
      .list{
        padding-top: 40rpx;
        @include flexWrap(flex-start,flex-start);
        flex-direction: row;
        .item{
          width: calc((100% - 130rpx)/3);
          height: 50rpx;
          text-align: center;
          line-height: 50rpx;
          border: 1rpx solid #e8e8e8;
          background: #ffffff;
          margin-right: 40rpx;
          margin-bottom: 40rpx;

        }
      }
    }
  }
  .search-list{
    @include flexWrap(flex-start,flex-start);
    flex-direction: row;
    width: 100vw;
    /*background: #ffffff;*/
    .search-item{
      width: calc(((100% - 40rpx)/2) - 40rpx);
      padding: 20rpx;
      margin-right: 40rpx;
      margin-bottom: 40rpx;
      /*border-radius: 16rpx;*/
      overflow: hidden;
      background: #ffffff;
      @include flex();
      flex-direction: column;
      .item-img{
        width: 100%;
        height: 300rpx;
      }
      .item-des{
        height: 80rpx;
        line-height: 80rpx;
        width: 100%;
        @include ellipsis(1);
      }
      .price{
        font-size: 26rpx;
        @include flex(flex-start,flex-end);
        flex-direction: row;
        height: 30rpx;
        width: 100%;
        color: #e12317;
        .original{
          font-size: 22rpx;
          color: #707070;
          text-decoration: line-through;
          padding-left: 20rpx;
        }
      }
    }
    .search-item:nth-child(even){
      margin-right: 0;
    }
  }
  .null{
    padding: 40rpx;
    text-align: center;
    color: #707070;
    width: calc(100% - 80rpx);
  }
</style>
